function dnd(dropzoneClass){
	// make widgets and layouts draggable + sortable
	$("#widget_container").sortable({
		opacity: 0.35,
		appendTo: 'body',
		helper: 'clone'
	});
	
	$("#layout_container").sortable({
		opacity: 0.35,
		appendTo: 'body',
		helper: 'clone',
	});
	
//	var dropzoneArr = $("."+dropzoneClass);
//	 dropzone handling
//	var prevDiv = null;
//	var prevDropObj = null;
	
	$("."+dropzoneClass).droppable({
		accept: ".layout , .widget",
		hoverClass: "ui-state-active",
		greedy: true,
//		over: function(event, ui){
//			height = $(this).height();
//			bottom = height * 0.9;
//			$(this).mousemove(function(e){
//			      if(e.pageY >= bottom)
//			    	  $(".50_50").css("height", "50%");
//			 });
//		},
		drop: function(event, ui){
			var me = this;
//			if(this.innerHTML == ""){
//				if(prevDropObj == this)
//					$(prevDiv).remove();
//				prevDropOjb = this;
//				var div = $(document.createElement('div')).attr({
//					name: $(ui.draggable).attr("id"),
//					"class": widgetClass
//				});
//				$(div).css("background-image", ui.draggable.css("background-image"));
//				$(div).draggable({ 
//					revert: true,
//					opacity: 0.35
//				});
//				$(this).append(div);
//				prevDiv = div;
//				$(ui.draggable).hide();
				switch($(ui.draggable).attr("class")){
					case "widget":
						
						break;
					case "layout":
						
						if(!($(this).parent().parent().parent().parent().attr("id") == "page_home")) {
							layouttype = $(ui.draggable).html();						
							layouttype = layouttype.split(":");
							var summe = 0;
				
							$(layouttype).each(function(){
								summe += parseInt(this);
							});
							
							var row = $(document.createElement('div')).attr({
								"class": "row "
							});
							
							$(layouttype).each(function(){
								var width = parseInt(this);
								
								if(summe < 100)
									width += 0.33;
								
								var col = $(document.createElement('div')).attr({
									"class": "dropzone "
								});
								
								$(col).css({
									"width": width+"%",
									"height": "100%",
									"float": "left",
									"border": "1px dotted black",
									"overflow": "hidden"
								});
								
								var handle = $(document.createElement('div')).attr({
									"class": "handle ui-widget-header " 
								});
																							
								var close_btn = $(document.createElement('span')).attr({
									"class": "close_btn"
								}).html("Delete Layout");
								
								$(close_btn).css({
									"position": "absolute",
									"cursor": "pointer",
									"z-index": "100"
								});
					
								//Append to parent
								$(handle).append(close_btn);
								$(col).append(handle);
								$(row).append(col);
								
								// event handling
								$(col, handle).hover(function(){
									$(handle).show();
								});
								
								$(col, handle).hover(
									    function() { $.data(this, 'hover', true); },
									    function() { $.data(this, 'hover', false); }
									).data('hover', false);
								
								$(col).mouseout(function(event){
									if(!($(col, handle).data('hover')))
										$(handle).hide();
								});
								
								$(handle).mouseout(function(event){
									if(!($(col, handle).data('hover')))
										$(handle).hide();
								});
								
								$(close_btn).click(function(){
									parent = $(this).parent().parent().parent().parent(); 
									$(this).parent().parent().parent().remove();
									rows = $(parent).children(".row");
									height = 100 / $(rows).size();
									$(rows).each(function(){
										$(this).css({
											"height": height+"%"
										});
									});
								});
							});
							
							//append row to parent
							$(me).append(row);							
							
							//adjust height of rows
							rows = $(me).children(".row");
							height = 100 / $(rows).size();
							$(rows).each(function(){
								$(this).css({
									"height": height+"%"
								});
							});
							
							// make columns dragable + dropable
							dnd("dropzone");
						} else {
							alert('Maximum count of layers reached!')
						}
						break;						
					default:
						break;
				}
//		
		}
	}).sortable({
		handle: ".handle"
	});
	
	$("body").droppable({
		accept: ".dropable",
		drop: function( event, ui ) {
			$("#"+ui.draggable.attr("name")).show();
			$(ui.draggable).remove();
		}
	});		
}